<template>
    <div class="radio_container">
        <div class="lunbotu">
            <img src="../../images/about/lunboList1.png" alt="">
        </div>
        <div class="radioInfo">
            <ol class="breadcrumb">
                <li><a href="#"><img src="../../images/homeIcon.png"/>首页</a></li>
                <li class="active">电台</li>
            </ol>
            <ul class="navLi">
                <li :class="{ active:item.flag }" v-for="item in tabList" :key="item.id" @click="changeTab(item.id)">
                    <a href="#">{{ item.text }}</a>
                </li>
            </ul>

            <div class="radioList">
                
                <div class="infoBox" v-for="(item , index) in radioList" :key="item.id">
                    <div class="top">
                        <img :src="$store.state.httpUrl + item.imageUrl" alt="">
                        <div class="vidoIcon">
                            <img src="../../images/radioMu.png" @click = "aplayReading(index)" alt="">
                        </div>
                    </div>
                    <p><a href="#">{{ item.title }}</a></p>
                    <span><a href="#">{{ item.ridioDesc }}</a></span>
                </div>
                        
            </div>
            
            <nav aria-label="...">
                <ul class="pagination">
                    <li :class="{ disabled: deleFlag }">
                        <span @click="delePage">
                            <span aria-hidden="true">&laquo;</span>
                        </span>
                    </li>
                    <li :class="{active:value == pageIndex}" v-for="(value,index) in pageList" @click="changePage(value)" :key="index">
                        <span>{{ value }} <span class="sr-only">(current)</span></span>
                    </li>
                    <li :class="{ disabled: addFlag }">
                        <span @click="addPage">
                            <span aria-hidden="true">&raquo;</span>
                        </span>
                    </li>
                </ul>
            </nav>
            <div style="width: 100%;" v-if="flag">
                <aplayer ref="aplayerId" autoplay  :music="videoUpload.music"></aplayer>
            </div>
        </div>
    </div>
</template>


<script>
import aplayer from "vue-aplayer"
export default {
    data(){
        return {
            flag:false,
            radioList:[],
            tabList: [
                {text:'全部电台',flag:true,id:'a'},
                {text:'答题技巧',flag:false,id:'1'},
                {text:'政策解读',flag:false,id:'2'},
                {text:'经验分享',flag:false,id:'3'},
                {text:'行业动态',flag:false,id:'4'},
            ],
            videoUpload: {
                progress: false,
                progressPercent: 0,
                successPercent: 0,
                autoplay:false,
                music: {
                    title: '梁静茹 - 勇气',
                    author: '梁静茹',
                    url: '../../mp3/梁静茹 - 勇气.mp3',
                    lrc: '[00:00.00]lrc here\n[00:01.00]aplayer',
                    pic:'../../images/radioList1.png',
                },
            },
            pageIndex:1,
            pageList:[],
            addFlag:false,
            deleFlag:true,
        }
    },
    methods:{
        changeTab(value){
            this.tabList.forEach(function(el,index){
                if(index == value){
                    el.flag = true;
                }else{
                    el.flag = false;
                }
            });
            this.pageIndex = 1;
            this.addFlag = false;
            this.deleFlag = true;
            this.radioListDataFn(value);
        },
        addPage(){
            if(this.addFlag){
                return;
            }
            this.pageIndex += 1;
            if(this.pageIndex > 1){
                this.deleFlag = false;
            }
            if(this.pageIndex === this.pageList.length){
                this.addFlag = true;
            }
            this.radioListDataFn();
        },
        changePage(value){
            this.pageIndex = value;
            if(this.pageIndex === 1){
                this.deleFlag = true;
                this.addFlag = false;
            }
            if(this.pageIndex  === this.pageList.length){
                this.deleFlag = false;
                this.addFlag = true;
            }
            this.radioListDataFn();
        },
        delePage(){
            if(this.deleFlag){
                return;
            }
            this.pageIndex -= 1;
            if(this.pageIndex === 1){
                this.deleFlag = true;
            }
            if(this.pageIndex < this.pageList.length){
                this.addFlag = false;
            }
            this.radioListDataFn();
        },
        aplayReading(index){
            this.flag = true;
            let item = this.radioList[index];
            this.videoUpload.music = {
                title: item.title,
                author: item.author,
                url: this.$store.state.httpUrl + item.ridioLink,
                lrc: '[00:00.00]lrc here\n[00:01.00]aplayer',
                pic: this.$store.state.httpUrl + item.imageUrl,
            }
        },
        radioListDataFn(value){
            var data = {
                pageSize:9, 
                pageNum:this.pageIndex
            }
            if(value && value !== 'a'){
                data.type = value;
            }
            this.$http.post(this.$store.state.httpUrl + '/index/ridio/pridio', data ).then((response) => {
                // success callback
                console.log(response)
                if(response.status == 200){
                    this.radioList = response.body.data.list;
                    this.pageList = response.body.data.navigatepageNums;
                    if(this.pageList.length === 1){
                        this.addFlag = true;
                    }
                }
            }, (response) => {
                // error callback
            });

        }
    }, 
    created(){
        this.radioListDataFn();
    },
    components:{
        aplayer
    }
}
</script>



<style lang="less" scoped>
.radio_container {
    .lunbotu img {
        width:100%;
        max-height: 350px;
    }

    .radioInfo {
        width:1000px;
        margin:0 auto;

        .breadcrumb {
            background-color: #fff;
            margin: 10px 0 8px;
            padding: 8px 0;
            font-size: 12px;

            img {
                height: 15px;
                width: auto;
                margin-top: -3px;
                margin-right: 5px;
            }
        }

        .navLi {
            overflow: hidden;
            
            li {
                float:left;
                margin-right: 30px;
            }

            a {
                padding: 3px 12px;
                display: block;
                font-size: 12px;
            }

            li.active a, a:hover {
                background-color: rgba(239,177,11,1);;
                color:#fff;
            }
        }

        
        .radioList {
            margin-top:15px;
            overflow: hidden;

            // li {
            //     display:flex;
            //     justify-content: space-between;
            //     margin-bottom: 20px;

               

                .infoBox {
                    width:300px;
                    margin: 10px 50px 20px 0;
                    box-shadow: 0 0 3px #ddd;
                    border:1px solid #ddd;
                    border-radius: 12px;
                    overflow: hidden;
                    float:left;

                    .top {
                        position: relative;
                        width: 100%;
                        overflow: hidden;
                        border-radius: 12px;

                        img {
                            width:100%;
                        }

                        .vidoIcon {
                            position: absolute;
                            left:0;
                            top:0;
                            width: 100%;
                            background-color: rgba(0,0,0,.5);
                            height: 0;
                            display: none;
                            overflow: hidden;


                            img {
                                position: absolute;
                                left:50%;
                                top:50%;
                                width:70px;
                                height:70px;
                                margin-left: -35px;
                                margin-top: -35px;
                                cursor:pointer;
                            }
                        }
                    }

                    .top:hover .vidoIcon {
                        height: 100%;
                        display: block;
                    }

                    p {
                        line-height: 22px;
                        padding: 10px 12px 13px;
                    }
                    span {
                        font-size: 11px;
                        padding: 0 15px 13px;
                        display: block;

                        a:hover, a:visited, a:link, a:active {
                            text-decoration: none;
                            color:#a5a5a5;
                        }
                    }
                // 
            }

            .infoBox:nth-child(3n){
                margin-right:0;
            }
        }

        nav {
            text-align: center;

            li {

                cursor:pointer;
            }
        }
        
    }

}
</style>
